import React from 'react'
import './index.less'
import Tabs from '../../components/Tabs'
import http from 'libs/http'
import { NoData } from 'components';

export default class extends React.Component {
  state = {
    tabsData: [
      { courseType: 0, name: '全部课程', active: true },
      { courseType: 1, name: '龙英语', },
      { courseType: 3, name: '龙编程' },
    ],
    courseType: 0,
    courseDetailsList: [],
  }

  componentDidMount() {
    this.getCourseDetailsList()
  }

  getCourseDetailsList = () => {
    const { courseType } = this.state
    http.get('/student/course-hour-detail/list', { courseType }).then(res => {
      const courseDetailsList = res.data
      // const courseDetailsList = [
      //   {
      //     "allHour": 0,
      //     "consumeClassHour": 1,
      //     "courseName": "英语外教在线一对一",
      //     "courseType": 1,
      //     "level": "Level 1",
      //     "packageName": "优享一对一课时套餐",
      //     "platformType": 2,
      //     "surplusClassHour": 1
      //   },{
      //     "allHour": 0,
      //     "consumeClassHour": 1,
      //     "courseName": "英语外教在线一对一",
      //     "courseType": 3,
      //     "level": "Level 1",
      //     "packageName": "优享一对一课时套餐",
      //     "platformType": 3,
      //     "surplusClassHour": 1
      //   },{
      //     "allHour": 0,
      //     "consumeClassHour": 1,
      //     "courseName": "英语外教在线一对一",
      //     "courseType": 0,
      //     "level": "Level 1",
      //     "packageName": "优享一对一课时套餐",
      //     "platformType": 0,
      //     "surplusClassHour": 1
      //   },{
      //     "allHour": 0,
      //     "consumeClassHour": 1,
      //     "courseName": "level 2",
      //     "courseType": 0,
      //     "level": "",
      //     "packageName": "",
      //     "platformType": 0,
      //     "surplusClassHour": 1
      //   }
      // ]
      
      this.setState({ courseDetailsList })
    })
  }

  // 全部课程、龙英语、龙编程之间切换
  changeTab = index => () => {
    const { tabsData } = this.state
    let courseType = 0
    tabsData.map((tab, i) => {
      if(index === i) {
        tab.active = true
        courseType = tab.courseType
      }else{
        tab.active = false
      }
    })
    this.setState({
      tabsData, courseType
    }, this.getCourseDetailsList)
  }

  render() {
    const { tabsData, courseDetailsList } = this.state
    return (
      <div className="course-detail">
        <Tabs tabsData={tabsData} changeTab={this.changeTab} fontColor="#fff" />
        {
          courseDetailsList.length > 0 ? (
            <div className="course-detail-content">
            {
              courseDetailsList.map((item, index) => {
                const {
                  allHour, //购买总课时
                  consumeClassHour, //消费课时
                  courseName, //课程名称
                  courseType, //1-英语，3-编程
                  level, //当前课程等级
                  levelStr,
                  packageName, //套餐名称
                  platformType, //2-直播，3-录播
                  surplusClassHour, //剩余课时
                } = item
                const platformTypeIcon = platformType === 2 ? 'live-icon' : (platformType === 3 ? 'recorded-icon' : '')
                const courseTypeIcon = courseType === 1 ? 'english-icon' : (courseType === 3 ? 'program-icon' : '' )
                return (
                  <div key={index} className="course-detail-item">
                    <div className="course-header">
                      <span className="course-name">{courseName}</span>
                      <i className={platformTypeIcon}></i>
                      <span className="course-package">课时套餐名称：{packageName}</span>
                      <b className={courseTypeIcon}></b>
                    </div>
                    <ul className="course-content">
                      <li>
                        <p>{levelStr}<span></span></p>
                        <span>当前课程等级</span>
                      </li>
                      <li>
                        <p>{allHour}<span>课时</span></p>
                        <span>购买课时总数</span>
                      </li>
                      <li>
                        <p>{consumeClassHour}<span>课时</span></p>
                        <span>消费课时数</span>
                      </li>
                      <li>
                        <p>{surplusClassHour}<span>课时</span></p>
                        <span>剩余课时数</span>
                      </li>
                    </ul>
                  </div>
                )
              })
            }
          </div>
          ) : <NoData/>
        }
      </div>
    )
  }
}

